<template>
  <div class="content">
    <div class="tixian">
      <div class="header">
        <van-nav-bar
          @click-left="$router.back()"
          left-arrow
          title="提现"
          fixed
        ></van-nav-bar>
      </div>
      <div class="yue">
        <span>{{ userInfo.balance || 0 }}</span
        ><br />
        <p>账户余额(元)</p>
      </div>
      <div class="main">
        <span>提现</span>
        <van-field
          v-model="money"
          center
          clearable
          label="￥"
          use-button-slot
          placeholder="提现最低不能低于10元"
        >
          <div class="codebtn" slot="button" @click="money = userInfo.balance">
            全部提现
          </div>
        </van-field>
        <p v-if="cardmsg.length == 0">
          手续费每笔<strong>0.00</strong>元，提现后<strong>24小时</strong>内到账
        </p>
        <p v-else>提现后<strong>24小时</strong>内到账</p>
      </div>
      <div class="tixianfangshi">
        <span>收款方式</span>
        <div class="noyhk" v-if="cardmsg.length == 0">
          <p @click="$router.push(`/bindbankcard?msg=1`)">
            <img src="../../assets/images/wallet/add.png" alt="" />
            <label>添加银行卡</label>
          </p>
        </div>
        <div class="youyhk" v-else>
          <div class="youyhks">
            <img :src="cardmsg[0].logo" alt="" />
            <span>{{ cardmsg[0].bankName }}</span>
            <img
              @click="checkdes"
              v-if="checked"
              src="../../assets/images/wallet/choose_wxz.png"
              alt=""
            />
            <img
              @click="checkdes"
              v-else
              src="../../assets/images/wallet/choose_xz.png"
              alt=""
            />
          </div>
          <p @click="genhuanyhk">
            <img
              src="../../assets/images/wallet/genghuan.png"
              alt=""
              style="margin-right: 10px"
            />
            更换银行卡
          </p>
        </div>
      </div>
      <div class="tixianshuoming">
        <span>提现说明</span>
        <div class="bottom">
          <i></i>
          <p>
            用户在确认进行充值前应仔细确认过自己的账号并仔细选择了相关操作选
            项，若因用户自身输入账号错误、 操作不当或不了解充值计费方式等造成
            充错账号、错选充值种类等情形而损害自身权益的， 优联互通将不会作出
            任何补偿或赔偿
          </p>
        </div>
      </div>
      <div class="btn" @click="qrtx()">确认提现</div>
      <!-- 弹框 -->
      <van-dialog
        class="tankuang"
        @confirm="querentixian"
        @cancel="quxiao"
        v-model="show"
        :title="`提现金额 ${money}.00 元`"
        show-cancel-button
      >
        <van-field
          style="margin-top: 20px"
          type="password"
          v-model="password"
          :maxlength="6"
          :formatter="formatter"
          center
          clearable
          use-button-slot
          :confirm="querentixian"
          placeholder="请输入支付密码"
        />
        <span class="pay" @click="$router.push('/settingpayPassword')"
          >去设置支付密码></span
        >
      </van-dialog>
    </div>
  </div>
</template>
<script>
import { Dialog } from "vant";
export default {
  data() {
    return {
      money: "",
      show: false, //输入银行卡密码
      shows: true, //判断是否有二维码
      password: "",
      tixian: true, //判断是否提现成功
      cardmsg: [],
      pay: "",
      checked: true,
      userInfo: {},
    };
  },
  created() {
    document.querySelector("html").style.backgroundColor = "#f3f5f7";
    document.querySelector("body").style.backgroundColor = "#f3f5f7";
  },
  mounted() {
    this.getcardMsg();
    this.getUserInfo();
  },
  computed: {},
  methods: {
    formatter(value) {
      // 过滤输入的非数字
      return value.replace(/[^\d]/g, "");
    },
    getUserInfo() {
      let info = JSON.parse(sessionStorage.getItem("userWxData"));
      let obj = {
        account: sessionStorage.getItem("agentId"),
        weChatNo: "",
        name: info.name,
        image: info.headimgurl,
        openId: info.openid,
        sex: info.sex,
        city: info.city,
        province: info.province,
        agentId:
          sessionStorage.getItem("shareId") ||
          sessionStorage.getItem("agentIds"),
      };
      this.$api.getUserInfo(obj).then((res) => {
        this.userInfo = res.data;
      });
    },
    // 银行卡选中和未选中状态
    checkdes() {
      this.checked = !this.checked;
    },
    // 跟换银行卡
    genhuanyhk() {
      if (this.cardmsg.length > 0) {
        Dialog.confirm({
          title: "提示",
          message: "请先去解绑银行卡，然后才能更换银行卡",
        })
          .then(() => {
            this.$router.push({
              path: "/bindbankcard",
              query: {
                msg: 2,
              },
            });
          })
          .catch(() => {
            return;
          });
      } else {
        this.$router.push({
          path: "/bindbankcard",
          query: {
            msg: 1,
          },
        });
      }
    },
    // 获取银行卡信息
    getcardMsg() {
      this.$api
        .getCardMsg({ customerId: this.$store.state.userInfo.id })
        .then((res) => {
          this.cardmsg = res.data || "";
          this.pay = res.pay;
        });
    },
    async querentixian() {
      if (this.password == "") {
        this.$toast("请输入支付密码");
        return;
      }
      if (this.password.length < 6) {
        return this.$toast("请输入6位支付密码");
      }

      let res = await this.$api.withdraw({
        userId: this.$store.state.userInfo.id,
        amount: this.money,
        bankId: this.cardmsg[0].id,
        serviceCharge: "2",
        password: this.password,
      });
      if (res.code != 0) return this.$toast(res.msg);
      this.$router.push({
        path: "/message",
        query: {
          msg: 1,
        },
      });
      //   清空数据
      this.password = "";
      this.show = false;
      this.money = "";
    },
    quxiao() {
      this.show = false;
    },
    qrtx() {
      if (this.money == "") return this.$toast("请输入提现金额");
      if (this.checked) return this.$toast("请选择银行卡");
      this.show = true;
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.van-nav-bar .van-icon {
  color: #fff;
}
.pay {
  text-align: center;
  font-size: 12px;
  color: red;
  display: block;
}
.youyhk {
  .youyhks {
    display: flex;
    justify-content: space-between;
    img {
      width: 20px;
      height: 20px;
      margin-left: 12px;
      &:last-of-type {
        margin-right: 15px;
      }
    }
    span {
      margin-right: 140px;
      margin-top: -12px;
    }
  }
}

.tankuang {
  line-height: 60px;
}

.tixian {
  width: 100%;
  height: 200px;
  background-image: url("../../assets/images/wallet/tixian.png");
  /deep/ .van-nav-bar {
    background-color: rgba(0, 0, 0, 0);
    .van-nav-bar__content {
      border-bottom: 0.5px solid #e4e4e493;
    }
    .van-nav-bar__title {
      color: #fff !important;
    }
  }
  .yue {
    text-align: center;
    padding-top: 60px;
    color: #fff;
    span {
      font-size: 16px;
    }
    p {
      font-size: 12px;
      margin-top: 8px;
    }
  }
  .main {
    width: 90%;
    margin: 20px auto;
    height: 150px;
    opacity: 1;
    background: #ffffff;
    border-radius: 20px;
    /deep/.van-field__label {
      width: 30px;
      margin-right: 0;
      font-size: 17px;
    }
    span {
      padding: 10px;
      display: block;
    }
    .codebtn {
      font-size: 12px;
      color: #418ce3;
    }
    p {
      font-size: 12px;
      text-align: center;
      margin-top: 20px;
      color: #bfbfbf;
      strong {
        color: red;
      }
    }
  }
  .tixianfangshi {
    width: 90%;
    height: 120px;
    opacity: 1;
    background: #ffffff;
    border-radius: 20px;
    margin: 5px auto;
    span {
      padding: 10px;
      display: block;
    }
    p {
      display: flex;
      font-size: 12px;
      margin-top: 20px;
      align-content: center;
      justify-content: center;
      label {
        margin-left: 5px;
      }
      img {
        width: 15px;
        height: 15px;
      }
    }
  }
  .tixianshuoming {
    span {
      display: block;
      padding: 15px;
      margin-top: 10px;
    }
    .bottom {
      display: flex;
      margin-left: 15px;

      i {
        display: inline-block;
        width: 8px;
        height: 8px;
        background: #477fe6;
        border-radius: 50%;
      }
      p {
        flex: 1;
        font-size: 10px;
        color: #4b4b4b;
        line-height: 19px;
        text-align: left;
        margin-top: -5px;
        margin-left: 5px;
        padding-right: 15px;
      }
    }
  }
  .btn {
    width: 80%;
    height: 40px;
    opacity: 1;
    background: linear-gradient(180deg, #7893df, #4b5fe0);
    border-radius: 41px;
    text-align: center;
    line-height: 40px;
    color: #ffffff;
    margin: 80px auto;
  }
}
</style>
